<html>
<head><title>Web Socket Test</title></head>
<body>
<form onsubmit="return false;">

    <input type="text" name="message" value="请输入手机号"/>
    <input type="button" value="进入聊天室"
           onclick="send(this.form.message.value,0)"/>
    <select id="destId">
    </select>
    <input name="reqText" type="text"/>
    <input type="button" value="发送消息"
           onclick="send(this.form.reqText.value,1)"/>
    <input type="button" value="关闭聊天"
           onclick="socket.close()"/>
    <h3>Output</h3>
    <textarea id="responseText" style="width:500px;height:300px;"></textarea>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    var socket;
    if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }
    if (window.WebSocket) {
        socket = new WebSocket("ws://127.0.0.1:8858/pushProxy");
        var h_resp;
        var heartCheck = {
            timeout: 5000,
            timeoutObj: null,
            serverTimeoutObj: null,
            start: function () {
                var self = this;
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                this.timeoutObj = setTimeout(function () {
                        console.log('heartCheck start');
                        socket.send("{\"msgType\":3}");
                        self.serverTimeoutObj = setTimeout(function () {
                            if (!h_resp) {
                                console.log('wait timeOut,close ws client');
                                socket.close();
                            } else {
                                h_resp = null;
                                heartCheck.start();
                            }
                        }, self.timeout);
                    }, this.timeout
                )
            }
        }

        socket.onmessage = function (event) {
            var ta = document.getElementById('responseText');
            var resp = JSON.parse(event.data);
            if (resp.fromId)
                ta.value = ta.value + '\n' + resp.fromId + "say: \n" + resp.msgContent + "\n";
            else {
                if (resp instanceof Array) {
                    if (resp) {
                        $("#destId").empty();
                        for (idx in resp) {
                            var node = "<option value=\"" + resp[idx] + "\">" + resp[idx] + "</option>";
                            $("#destId").append(node);
                        }
                    }
                } else {
                    if (resp.pushType && resp.pushType != 3) {
                        ta.value = ta.value + '\n' + event.data;
                    }
                }
            }
            h_resp = event.data;
        };
        socket.onopen = function (event) {
            var ta = document.getElementById('responseText');
            ta.value = "Web Socket opened!";
            heartCheck.start();
        };
        socket.onclose = function (event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value + "Web Socket closed";
        };
    } else {
        alert("Your browser does not support Web Socket.");
    }
    var curUser;
    function send(message, type, dest) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            var reg;
            if (type == 0)
                reg = {"msgType": 0, "fromId": curUser = message, "pushType": 2, "appName": "testApp"};
            else {
                reg = {
                    "msgType": 1, "fromId": curUser, "toId": [document.getElementById("destId").value], "pushType": 2,
                    "appName": "testApp", "msgContent": message
                };
                var ta = document.getElementById('responseText');
                ta.value = ta.value + '\n' + curUser + "say: \n" + message + "\n";
            }
            socket.send(JSON.stringify(reg));
        } else {
            alert("The socket is not open.");
        }
    }
</script>
</body>
</html>